<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { getMaterialTreeList } from "@/api/materialTree";

const props = defineProps({
  materialCateId: {
    type: [String, Number],
    default: null
  }
});
const materialName = ref("");
const tableData = ref([]);
const totalSelection = ref([]);
const tableRef = ref(null);

watch(
  () => props.materialCateId,
  () => {
    initData();
  }
);
// 分页器功能
/**
 * 分页器配置
 */
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
});

// 初始化数据
const initData = () => {
  getMaterialTreeList(
    Object.assign(
      {
        size: pagination.size,
        current: pagination.current
      },
      {
        materialNameKeyword: materialName.value,
        materialCateId: props.materialCateId
      }
    )
  ).then(res => {
    pagination.current = res.data.current;
    pagination.total = res.data.total;
    tableData.value = res.data.records;
    const flag = getIsSelectedAll();
    if (flag) {
      tableRef.value.toggleAllSelection();
    } else {
      tableData.value.forEach(item => {
        const isSelected = totalSelection.value.some(
          t =>
            t.materialCode + t.materialSpecsId ===
            item.materialCode + item.materialSpecsId
        );
        if (isSelected) {
          tableRef.value.toggleRowSelection(item, true);
        }
      });
    }
  });
};

/**
 * 分页器改变事件
 * @param value 当前页
 * @param pageSize 每页大小
 */
const handleCurrentChange = (value?: number, pageSize?: number) => {
  pagination.current = value || 1;
  pagination.size = pageSize || 20;
  initData();
};

// 全选事件监听
const toggleAll = (selection: any) => {
  if (selection.length === 0) {
    totalSelection.value = totalSelection.value.filter(
      val =>
        tableData.value.findIndex(
          n =>
            n.materialCode + n.materialSpecsId ===
            val.materialCode + val.materialSpecsId
        ) === -1
    );
  } else {
    const res = totalSelection.value.concat(tableData.value);
    const result = [];
    res.forEach(item => {
      if (
        result.findIndex(
          t =>
            t.materialCode + t.materialSpecsId ===
            item.materialCode + item.materialSpecsId
        ) === -1
      ) {
        result.push(item);
      }
    });
    totalSelection.value = result;
  }
};

// 单选按钮是否选中
const getIsSelected = (row: any) => {
  return totalSelection.value.some(
    item =>
      item.materialCode + item.materialSpecsId ===
      row.materialCode + row.materialSpecsId
  );
};

// 单选按钮点击事件
const toggleRowSelection = (row: any) => {
  tableRef.value.toggleRowSelection(row);
  const index = totalSelection.value.findIndex(
    val =>
      val.materialCode + val.materialSpecsId ===
      row.materialCode + row.materialSpecsId
  );
  if (index === -1) {
    totalSelection.value.push(row);
  } else {
    totalSelection.value.splice(index, 1);
  }
};

// 全选按钮是否选中
const getIsSelectedAll = () => {
  return !tableData.value.some(item => {
    const isSelected = totalSelection.value.some(
      t =>
        t.materialCode + t.materialSpecsId ===
        item.materialCode + item.materialSpecsId
    );
    return !isSelected;
  });
};

defineExpose({
  getSelections: () => totalSelection.value,
  setSelections: (selections: any) => {
    totalSelection.value = selections;
  }
});
</script>
<template>
  <div class="flex-1">
    <div class="flex flex-row items-center mb-[16px]">
      <div class="flex flex-row items-center mr-[40px]">
        <span class="mr-[8px]">物料名称</span>
        <el-input v-model="materialName" placeholder="请输入物料名称" />
      </div>
      <el-button type="primary" @click="initData">查询</el-button>
    </div>
    <div class="main">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        height="271"
        @select-all="toggleAll"
      >
        <el-table-column type="selection" min-width="64">
          <template #default="{ row }">
            <div
              class="checkbox"
              :class="{ 'is-checked': getIsSelected(row) }"
              @click.prevent.stop="toggleRowSelection(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="materialCode" label="物料编码" width="128" />
        <el-table-column prop="materialName" label="物料名称" width="136" />
        <el-table-column prop="materialType" label="物料类型" width="104" />
        <el-table-column prop="materialCateName" label="物料分类" width="104" />
        <el-table-column
          prop="materialSpecsName"
          label="规格型号"
          width="200"
        />
        <el-table-column prop="unit" label="单位" width="80" />
      </el-table>
      <div v-if="pagination.total > pagination.size" class="pagination">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          class="el-pagination"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="pagination.total"
          @change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
